<template>
    <div class="page">
        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">旅行红包领取</h1>
            <div class="header-btnRight">
                <div class="header-btnRight" @click="closeRoleFn">使用规则</div>
            </div>
        </div>
        <img class="ticket-bar" src="../assets/ticket-bar-new.jpg" alt="">
        <div class="tab-menu">
            <div class="tab-menu-item"
                 v-for="(item,index) in tabMenu"
                 :class="{'active' : tabCurr==index}"
                 @click="tabFun(index)"
            >{{item.name}}
            </div>
        </div>
        <div v-if="tabCurr==0">
            <ul class="ticket-list">
                <li class="ticket-list-item" v-for="(item,index) in ticketList">
                    <div class="ticket-list-item-price">

                        <span v-if="item.type==2">¥ <span class="num">{{item.price}}</span></span>

                        <span v-if="item.type==1"><span class="num">{{item.price*10}}</span> 折</span>
                    </div>
                    <div class="ticket-list-item-info">
                        <h3 class="ticket-list-item-info-title">{{item.title}}</h3>
                        <p class="ticket-list-item-info-desc"><span v-if="item.status==2">已完成</span><span v-else>待邀请</span>：{{item.num}}/{{item.sharenum}}</p>
                    </div>
                    <div class="ticket-list-item-opt">
                        <span class="btn" :class="{'active' : item.status==2,'success':item.status==3 }" @click="optTicket(index)">
                            {{status[item.status]}}
                        </span>
                    </div>
                </li>

            </ul>
        </div>
        <div v-if="tabCurr==1">
            <div class="list">
                <form @submit.prevent="formSubmit">
                    <div class="list-item">
                        <div class="list-item-input">
                            <input name="name1"  type="text" maxlength="30" v-model="code" placeholder="请输入CODE"/>
                        </div>
                    </div>
                    <!-- <div class="list-item">
                        <div class="list-item-input">
                            <input name="name1"  type="text" maxlength="30" v-model="password" placeholder="请输入领取密码"/>
                        </div>
                    </div> -->
                    <div class="incomeSubmit">
                        <input type="submit" class="incomeSubmit-btn"  value="立即领取"/>
                    </div>
                </form>
            </div>
        </div>

        <div class="share-div" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>
        <TicketRole :roleInfoShow="roleInfoShowState" @closeRole="closeRoleFn"></TicketRole>
    </div>
</template>

<script>
    import { Toast,MessageBox } from 'mint-ui';
    import wxShare from "../store/wxShare"
    import config from "../store/config"
    import storage from "../store/localstorage"
    import TicketRole from "../components/TicketRole"
    export default {
        name: "My-ticket-other",
        data() {
            return {
                code:'',
                password:'kbx123456',
                tabCurr: 0,
                tabMenu: [{name: '领取'}, {name: '兑换'}],
                ticketList:[],   //type 1折扣 2满减  status 1去完成 2可领取 3已领取 4过期
                shareView: false, //分享
                status:['','去完成','点击领取','已领取','已过期'],
                roleInfoShowState: false
            }
        },
        components: {
            TicketRole
        },
        methods: {
            closeRoleFn(state){
                this.roleInfoShowState = state;
            },
            tabFun(val) {
                this.tabCurr = val;
            },
            //获取列表
            getTicketList(){
                this.axios.postAll('/wapcouponlist')
                    .then(res=>{
                        if(res.data.code == '0'){
                            this.ticketList=res.data.data;
                            this.ticketList.forEach(item=>{
                                item.price=item.price.replace('.00','');
                            });
                        }
                        
                    })
            },
            //操作优惠券 分享、领取
            optTicket(index){
                console.log(index);
                if(this.ticketList[index].status==1){
                    this.shareView=!this.shareView;
                    this.share(index);
                }else if(this.ticketList[index].status==2){
                    console.log('领取')
                    this.axios.post('/waporderdiscountuser',{member_id:this.ticketList[index].member_id, order_id:this.ticketList[index].order_id,sharenum:this.ticketList[index].sharenum,coupon_id:this.ticketList[index].id})
                        .then(res=>{
                            MessageBox({
                                title: '提示',
                                message: "旅行红包领取成功，去查看？",
                                confirmButtonText:'确定',
                                showCancelButton: true,
                                closeOnClickModal:false,
                            }).then(res=>{
                                if(res=='confirm'){
                                    this.$router.push('/my-ticket')
                                }else{
                                    this.ticketList[index].status = 3;
                                    return;
                                }
                            });
                        })
                }
            },
            // 分享
            shareFn() {
                this.shareView = !this.shareView;
            },
            formSubmit: function () {
                var _that = this;
                if (!_that.code) {
                    Toast({message:'请输入CODE', duration: 1000});
                    return false;
                }
                if (!_that.password) {
                    Toast({message:'请输入需领取密码', duration: 1000});
                    return false;
                }
                _that.axios.post('/kbxcoupon',{code:_that.code,pwd:_that.password})
                    .then(res => {
                        this.$router.push({path:"/my-ticket/"})
                    })
                    .catch(err => console.log(err));
            },
            share(index) {
                if(this.$route.query.hasOwnProperty('order_id')){
                    window.localStorage.share_order_id = this.$route.query.order_id; //分享后，保存订单id
                }
                var userinfo = storage.get('userinfo');
                var uid='';
                if(userinfo.member_id){
                    uid=userinfo.member_id;
                }
                let orderId = this.ticketList[index].order_id;
                wxShare({
                    title: orderId == 'longInvite' ? '快帮行|北美定制游' : '新人红包赠与你，想去哪浪去哪浪！', // 分享标题
                    desc:  orderId == 'longInvite' ? ' 一大波当地特色玩乐,邀请你来体验' :'快帮行，北美定制游,玩点不一样的', // 分享描述
                    link: config.url+'/quick_help_wap1/#/show/'+this.ticketList[index].goods_id+'?order_id='+this.ticketList[index].order_id+'&uid='+uid, // 分享链接
                    imgUrl:config.url+'/uploads/admin/admin_thumb/20180104/xing.jpg', // 分享图标
                    debug: false
                }, () => {//分享成功后的回调函数
                    this.shareView = false
                    // console.log('分享成功')
                    this.axios.post('/waporderdiscount',{
                        goods_id:this.ticketList[index].goods_id,
                        order_id:this.ticketList[index].order_id
                    }).then(res=>{

                    })
                });
            }
        },
        mounted(){
            this.getTicketList();
        }
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(60);
        background: $bgcolor1;
    }
    .page{
        background: $bgcolor1;
        min-height: 100%;
    }

    .header{
        display: flex;
        align-items: center;
        padding:rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight{
            color: #5D5D5D;
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }


    .tab {
        background: $color0;
        &-menu {
            display: flex;
        }
        &-menu-item {
            flex: 1;
            padding: rpx(30) rpx(20);
            text-align: center;
            color: $color5;
            font-size: rpx(32);
            border-bottom: solid $color2 rpx(4);

            &.active {
                color: $color3;
                border-bottom: solid $color3 rpx(4);
            }
        }
    }
    .ticket{
        &-bar{
            width: 100%;
        }
        &-list{
            margin:rpx(30);
            &-item{
                display: flex;
                align-items: center;
                margin-bottom: rpx(20);
                padding: rpx(40) 0;
                background:$color0;
                border-radius: rpx(10);
                &-price{
                    width: rpx(180);
                    text-align: center;
                    color: $color3;
                    .num{
                        font-size: rpx(62);
                    }
                }
                &-info{
                    flex: 1;
                    &-title{
                        padding-bottom: rpx(10);
                        font-size: rpx(32);
                        font-weight: normal;
                    }
                    &-desc{
                        color:$color5;
                    }
                }
                &-opt{
                    margin-right: rpx(20);
                    text-align: right;
                    .btn{
                        display: block;
                        width: rpx(140);
                        height: rpx(60);
                        line-height: rpx(60);
                        background: $color5;
                        border-radius: $radius6;
                        color: $color0;
                        font-size: rpx(28);
                        text-align: center;
                    }
                    .active{
                        background: $color7;
                    }
                    .success{
                        background: $bgcolor1;
                        color: #999;
                    }
                }
            }
        }
    }

    //项列表
    .list {
        margin: rpx(30);
        &-item {
            display: flex;
            align-items: center;
            overflow: hidden;
            background: $color0;
            padding:rpx(35) rpx(30);
            border-bottom: solid 1px $color2;
            &-input {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: rpx(34);
                input{
                    font-size: rpx(34);
                    width: 100%;
                }
            }
        }
    }
    .incomeSubmit{
        padding: rpx(60) 0 ;
        &-btn{
            display: block;
            width: 100%;
            height: rpx(100);
            line-height: rpx(100);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }

    .program-about{
        padding: rpx(30);
        &-img{
            width: 100%;
            height: auto;
        }
    }
        
    //分享
    .share {
        &-div {
            position: fixed;
            background: rgba(0, 0, 0, .5);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
            text-align: center;
            &-img {
                margin-top: rpx(30);
                width: rpx(500);
                height: rpx(220);
            }
        }
    }

</style>
